<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Weather</title>
	<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
	<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
	<style>
		@font-face {
			font-family: "iconfont";
			src: url('iconfont.eot?t=1526632295716');
			/* IE9*/
			src: url('iconfont.eot?t=1526632295716#iefix') format('embedded-opentype'),
				/* IE6-IE8 */
				url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
				url('iconfont.ttf?t=1526632295716') format('truetype'),
				/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
				url('iconfont.svg?t=1526632295716#iconfont') format('svg');
			/* iOS 4.1- */
		}

		.iconfont {
			font-family: "iconfont" !important;
			font-size: 16px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		.icon-fengxiang:before {
			content: "\e615";
		}

		.icon-wendu:before {
			content: "\e62d";
		}

		.icon-riqi:before {
			content: "\e606";
		}

		.icon-chengshi:before {
			content: "\e613";
		}

		.icon-qixiang-fengli:before {
			content: "\e604";
		}

		.icon-sousuo:before {
			content: "\e53f";
		}

		.icon-weather2:before {
			content: "\e502";
		}

		.icon-tianqi:before {
			content: "\e6e4";
		}


		* {
			margin: 0;
			padding: 0;
		}

		ul,
		li {
			list-style: none;
		}

		a {
			text-decoration: none;
		}

		html,
		body {
			width: 100%;
			height: 100%;
			background: #00BFFF;
		}

		input {
			border: none;
			outline: none;
		}

		.clearfix:after {
			content: "";
			height: 0;
			line-height: 0;
			display: block;
			clear: both;
		}

		.clearfix {
			zoom: 1;
		}

		.wrap {
			width: 600px;
			min-height: 300px;
			position: fixed;
			left: 50%;
			top: 50%;
			margin-left: -300px;
			margin-top: -150px;
		}

		.wrap .header {
			width: 100%;
			height: 40px;
			position: relative;
			border: 1px solid #fff;
			border-radius: 4px;
		}

		.wrap .header .intCity {
			width: 80%;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			text-indent: 10px;
		}

		.wrap .header .seachBtn {
			width: 19%;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			color: #fff;
			text-align: center;
			background: #00BFFF;
			font-weight: 600;
			cursor: pointer;
		}

		.wrap .left {
			width: 200px;
			min-height: 300px;
			float: left;
			text-align: left;
			padding-top: 20px;
		}

		.wrap .left li {
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			color: #fff;
		}

		.wrap .left li i {
			font-size: 22px;
			color: yellow;
		}

		.wrap .left li .span2 {
			margin-left: 20px;
		}

		.wrap .left li .cityName {
			font-size: 20px;
		}

		.wrap .right {
			width: 400px;
			text-align: center;
			float: right;
		}

		.wrap .right ul {
			margin-top: 20px;
			color: #fff;
			font-size: 16px;
		}

		.wrap .right .data1 {
			width: 50%;
			float: left;
		}

		.wrap .right .data2 {
			width: 50%;
			float: left;
		}

		.wrap .right .data3 {
			width: 100%;
		}

		input {
			outline: none;
			border: none;
			height: 30px;
		}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

</head>

<body>
	<div class="wrap clearfix">
		<div class="header">
			<input class="intCity" type="text" placeholder="Please enter the city" value="深圳" />
			<input class="seachBtn" type="button" value="搜索" />
		</div>
		<div class="swiper">
			<div class="swiper-wrapper">
			</div>
		</div>

	</div>
	<script>
		// 事件绑定
		// .click(function(){})
		$('.seachBtn').on('click', function () {
			// 获取输入框的内容
			let val = $('.intCity').val().trim()
			// 聚合数据转发示例
			// $.ajax({
			// 	type:'post',
			// 	url:'http://192.168.0.30:3030/users/forward',
			// 	data:{
			// 		params:{
			// 			date:'2025-11-11',
			// 			key:'2257503cad342f9f7e97c63ac11cd8c69',
			// 		},

			// 		url:'http://v.juhe.cn/calendar/day',
			// 		type:'get'
			// 	},
			// 	success:res=>{
			// 		console.log(res);

			// 	}
			// })
			// 发起请求前，进行前置验证
			if (!val) return alert('请填写城市名称')
			// 发起请求 将传递过来的城市变成城市码
			$.ajax({
				type: 'post',
				url: 'http://192.168.0.30:3030/users/gaodead',
				data: {
					keyword: val
				},
				success: res => {
					console.log(res);
					// 判断请求是否成功
					if (!parseInt(res.status)) return alert('请求失败，失败原因' + res.info)
					// 解析code
					let code = res.districts[0].adcode
					// 获取当天天气.
					// $.ajax({
					// 	type:'post',
					// 	url:'http://192.168.0.30:3030/users/gaodeweather',
					// 	data:{
					// 		city:code
					// 	},
					// 	success:red=>{
					// 		console.log(red);
					// 		// 判断请求是否成功
					// 		if(!parseInt(red.status)) return alert('请求失败，失败原因'+red.info)
					// 		// 渲染dom
					// 		let Weatherlist = red.lives
					// 		// 解构赋值
					// 		let {province,city,adcode,weather,temperature,winddirection,windpower,humidity,reporttime,temperature_float,humidity_float} = Weatherlist[0]
					// 			$('.cityName').html(city)
					// 			$('.left_data').html(reporttime)
					// 			$('.left_weather').html(weather)
					// 			$('.left_temp').html(temperature_float+'℃')
					// 			$('.left_wind1').html(winddirection+'风')
					// 			$('.left_wind2').html(windpower+'级')



					// 	}
					// })
					$.ajax({
						type: 'post',
						url: 'http://192.168.0.30:3030/users/gaodeweather',
						data: {
							city: code,
							extensions: 'all'
						},
						success: red => {
							console.log(red);
							// 判断请求是否成功
							if (!parseInt(red.status)) return alert('请求失败，失败原因' + red.info)
							// 渲染dom
							let Weatherlist = red.forecasts[0]
							Weatherlist.casts.forEach(item => {
								$('.swiper-wrapper').append(`
								<div class="swiper-slide">
					<div class="left">
						<ul>
							<li><span><i class="icon iconfont icon-chengshi"></i></span><span
									class="cityName span2">${Weatherlist.city}</span></li>
							<li><span><i class="icon iconfont icon-riqi"></i></span><span
									class="left_data span2">${item.date}</span></li>
							<li><span><i class="icon iconfont icon-weather2"></i></span><span
									class="left_weather span2">${item.dayweather}</span>
							</li>
							<li><span><i class="icon iconfont icon-wendu"></i></span><span
									class="left_temp span2">${item.daytemp}℃</span></li>
							<li><span><i class="icon iconfont icon-fengxiang"></i></span><span
									class="left_wind1 span2">${item.daywind}风</span></li>
							<li><span><i class="icon iconfont icon-qixiang-fengli"></i></span><span
									class="left_wind2 span2">${item.daypower}级</span>
							</li>
						</ul>
					</div>
					<div class="right">
						<ul class="data1"></ul>
						<ul class="data2"></ul>
						<ul class="dataOne"></ul>
					</div>
				</div>
								`)
								
							});

							console.log(Weatherlist);




						}
					})


				}

			})

		})
	</script>
	<script>
		// 要绑定的dom
		var mySwiper = new Swiper('.swiper', {
			// 配置项
			// direction: 'vertical', // 垂直切换选项
			loop: true, // 循环模式选项
		
		})        
	</script>

</body>

</html>